<template>
  <div class="view">
    <el-row class="handle-box">
      <!-- @click="selectVisible = true" -->
      <el-button
        class="jianbianbule"
        type="primary"
        icon="el-icon-plus"
        >{{$t("wellsetlist.selectFile")}}</el-button
      >
      <!-- @click="uploadVisible = true" -->
      <el-button
        class="jianbianbule"
        type="primary"
        icon="el-icon-plus"
        >{{$t("wellsetlist.uploadFile")}}</el-button
      >

        <el-select
          v-model="value"
          filterable
          :placeholder="$t('wellsetlist.selectBatch')"
        >
          <el-option label="1" value="1"></el-option>
        </el-select>
        <!-- @click="editVisible = true" -->
      <el-button
        class="jianbianedit"
        type="primary"
        icon="el-icon-plus"
        >{{$t("wellsetlist.batchEdit")}}</el-button
      >
      <!-- @click="deleVisible = true" -->
      <el-button
        class="jianbianred"
        type="primary"
        icon="el-icon-plus"
        >{{$t("wellsetlist.batchDel")}}</el-button
      >
      
    </el-row>
    <div class="tablebox">
    <template>
      <el-table :data="tables" size="mini" stripe class="tablefisbox">
        <el-table-column prop="wellName" :label="$t('wellsetlist.wellName')" min-width="50">
        </el-table-column>
        <el-table-column prop="wellSection" min-width="70" :label="$t('wellsetlist.wellSection')">
        </el-table-column>
        <el-table-column prop="platformName" min-width="60" :label="$t('wellsetlist.platformName')">
        </el-table-column>
        <el-table-column prop="toolName" :label="$t('wellsetlist.toolName')">
        </el-table-column>
        <el-table-column prop="additionalRemarks" :label="$t('wellsetlist.additionalRemarks')">
        </el-table-column>
        <el-table-column prop="operationPredict" :label="$t('wellsetlist.operationPredict')">
        </el-table-column>
        <el-table-column prop="drillDIST" :label="$t('wellsetlist.drillDIST')">
        </el-table-column>
        <el-table-column prop="WITSRecordID" :label="$t('wellsetlist.WITSRecordID')">
        </el-table-column>
        <el-table-column prop="WITSItemID" :label="$t('wellsetlist.WITSItemID')">
        </el-table-column>
        <el-table-column prop="curveName" min-width="80" :label="$t('wellsetlist.curveName')">
        </el-table-column>
        <el-table-column prop="fillIn" min-width="80" :label="$t('wellsetlist.fillIn')">
        </el-table-column>
        <el-table-column prop="inboundDate" min-width="100" :label="$t('wellsetlist.inboundDate')">
        </el-table-column>
        <el-table-column prop="fillDate" min-width="60" :label="$t('wellsetlist.fillDate')">
        </el-table-column>
        <el-table-column prop="depth" min-width="60" :label="$t('wellsetlist.depth')">
        </el-table-column>
        <el-table-column prop="time" min-width="60" :label="$t('wellsetlist.time')">
        </el-table-column>
        <el-table-column :label="$t('public.operation')" width="180">
          <template slot-scope="scope">
            <el-button type="warning" icon="el-icon-edit"  round
              size="mini"
            @click="handleEdit(scope.$index, scope.row)">{{ $t("public.edit") }}</el-button>
            <el-button type="danger" icon="el-icon-delete" class="red" round
              size="mini"
            @click="handleDelete(scope.$index, scope.row)"
              >{{ $t("public.del") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-col class="pages">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="pageSize"
        :total="total"
      >
      </el-pagination>
    </el-col>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addVisible: false,
      editVisible: false,
      editform: {},
      addform: {},
      idx: -1,
      pageTotal: 0,
      value: "",
      currentPage4: 1, //当前页数
      // query: {
      //     principal: '',
      //     pageIndex: 1,
      //     pageSize: 10
      // },

      // tables: [], //表格数据
      total: 0, //总共条数
      page: 1, //请求页
      limit: 10, //页条数
      pageSize: 1, //当前页

      //区域名称
      optionstimezone: [
        {
          value: "选项1",
          label: "西12区国际换日线",
        },
        {
          value: "选项2",
          label: "西11区萨摩亚",
        },
        {
          value: "选项3",
          label: "西10区夏威夷",
        },
        {
          value: "选项4",
          label: "西9区阿拉斯加",
        },
        {
          value: "选项5",
          label: "东1区罗马",
        },
        {
          value: "选项6",
          label: "东1区中欧",
        },
      ],
        timezonevalue: "",
      // //井类型
      optionsWITSO: [
        {
          value: "选项1",
          label: "bakWits_7",
        },
        {
          value: "选项2",
          label: "bkwits_13",
        },
        {
          value: "选项3",
          label: "wits_1",
        },
        {
          value: "选项4",
          label: "wits_1_tvd",
        },
      ],
      WITSOvalue: "",
      ruleValidate: {
        name: { required: true, message: "不能为空", trigger: "blur" },
        enname: { required: true, message: "不能为空", trigger: "blur" },
      },
      tableData: [
        {
          id: 1,
          serialNumber:'1-Depth',
          WITSOselect: <select>
          <option></option>
          </select>
        },
        {
          id: 2,
          serialNumber:'2-DR2M',

        },
        {
          id: 3,
          serialNumber:'3-MR2',
         
        },
        {
          id: 4,
          serialNumber:'4-HKLA',
         
        },
      ],
      searchname: "",
      currentPage4: 1, //当前页数
    };
  },
  computed: {
    tables() {
      // this.$set(this.query, 'pageIndex', 1);
      // this.getData();
      const search = this.searchname;
      if (search) {
        return this.tableData.filter((data) => {
          return Object.keys(data).some((key) => {
            return String(data[key]).toLowerCase().indexOf(search) > -1;
          });
        });
      }
      return this.tableData;
    },
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    // getData() {
    //     fetchData(this.query).then(res => {
    //         console.log(res);
    //         this.tableData = res.list;
    //         this.pageTotal = res.pageTotal || 50;
    //     });
    // },

    // 添加操作
    addarea() {
      this.addVisible = false;
      this.$message.success(`添加成功`);
      this.addform.id = this.tableData.length + 1;
      this.addform.createdate = new Date().toLocaleString();
      this.addform.remark = "无";
      this.tableData.push(this.addform);
      this.addform = {};
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm(this.$t('public.confirmcontent'), this.$t('public.confirmtitle'), {
        type: "warning",
      })
        .then(() => {
          this.$message.success(this.$t('public.confirmtips1'));
          this.tableData.splice(index, 1);
        })
        .catch(() => {});
    },
    // 编辑操作
    handleEdit(index, row) {
      this.idx = index;
      this.editform = row;
      this.editVisible = true;
    },
    // 保存编辑
    saveEdit() {
      this.editVisible = false;
      this.$message.success(`修改第 ${this.idx + 1} 行成功`);
      this.$set(this.tableData, this.idx, this.editform);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang='less' scoped>

</style>